<template>
  <div class="toastbox active-animation">
    <i :class="['iconfont', getStyle]"></i>
    <span>{{ toastMsg }}</span>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      toastType: (state) => state.showToast.toastType,
      toastMsg: (state) => state.showToast.toastMsg,
    }),

    getStyle() {
      if (this.toastType == "success") {
        return "icon-toast_chenggong";
      } else if (this.toastType == "warning") {
        return "icon-toast-jinggao";
      } else if (this.toastType == "error") {
        return "icon-toast-shibai_huaban";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.toastbox {
  width: 210px;
  height: 70px;
  line-height: 70px;
  background-color: rgb(255, 255, 255);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 99;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  border: 1px solid rgb(211, 212, 211);
  border-radius: 10px;
  .iconfont {
    margin-right: 10px;
  }

  .icon-toast-shibai_huaban {
    color: red;
  }

  .icon-toast_chenggong {
    color: green;
  }

  .icon-toast-jinggao {
    color: orange;
  }

  &.active-animation {
    animation: shake 500ms ease-in-out; //ease-in-out 表示内外移动
  }
}

@keyframes shake {
  10%,
  60% {
    transform: translateX(-3px);
  }
  20%,
  70% {
    transform: translateX(3px);
  }
  30%,
  80% {
    transform: translateX(-5px);
  }
  40%,
  90% {
    transform: translateX(-5px);
  }
  0%,
  50%,
  100% {
    transform: translateX(0px);
  }
}
</style>

/*
面试题：你封装过什么组件吗？
  面试官您好,封装过组件。比如toast吐司弹框。
  1.创建一个组件toast.vue,实现基本布局
  2.在用vuex封装数据,实现数据的共享【显示隐藏,提示内容,提示类型】
  3.在vuex中的 actions 实现自动关闭的功能
  4.用vue提供的<transition>组件实现过渡的效果
 */